<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Svg Path</title>
</head>

<body>
    <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <path d="M 10 10" />

        <!-- Points -->
        <circle cx="10" cy="10" r="2" fill="red" />

    </svg>

    <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <!-- 
            move x y
            h x
            v y
            l x y
        -->
        <path d="M 10 10 H 90 V 90 H 10 L 10 10" />

        <!-- Points -->
        <circle cx="10" cy="10" r="2" fill="red" />
        <circle cx="90" cy="90" r="2" fill="red" />
        <circle cx="90" cy="10" r="2" fill="red" />
        <circle cx="10" cy="90" r="2" fill="red" />


    </svg>

    <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black" />

    </svg>

    <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent" />
        <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent" />
        <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent" />
        <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent" />
        <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent" />
        <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent" />
        <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent" />
        <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent" />
        <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent" />

    </svg>

    <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" />
    </svg>

    <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent" />
    </svg>

    <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent" />
    </svg>

    <svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 315
                 L 110 215
                 A 30 50 0 0 1 162.55 162.45
                 L 172.55 152.45
                 A 30 50 -45 0 1 215.1 109.9
                 L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5" />
    </svg>

    <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M80 80
                 A 45 45, 0, 0, 0, 125 125
                 L 125 80 Z" fill="green" />
        <path d="M230 80
                 A 45 45, 0, 1, 0, 275 125
                 L 275 80 Z" fill="red" />
        <path d="M80 230
                 A 45 45, 0, 0, 1, 125 275
                 L 125 230 Z" fill="purple" />
        <path d="M230 230
                 A 45 45, 0, 1, 1, 275 275
                 L 275 230 Z" fill="blue" />
    </svg>
</body>

</html>